<!--  -->
<template>
  <div v-loading="loading">
    <div style="margin: 12px 0 0 24px;">
      <el-button v-if="sconfig.length > 1" @click="checkLanguageText" type="text" style="font-size: 14px;">编辑语点显示文本
      </el-button>
    </div>
    <div class="lang-set">
      <el-form :model="form">
        <el-form-item label="默认语言版本：" :label-width="formLabelWidth">
          <el-radio-group v-model="form.defaultSite" @change="changeDefaultSite">
            <el-radio v-for="(item, index) in sconfig" :title="item.status !== 1?'已关闭！':''" :disabled="item.status !== 1"
          :key="index" :label="item.siteId">
            <span>{{getSiteLanguage(item.siteId)}}</span>
          </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="语言版本展示：" :label-width="formLabelWidth">
          <el-radio-group v-model="form.languageStyle" @change="changeLanguageStyle">
            <el-radio size="mini" :label="1">语言文字</el-radio>
            <el-radio size="mini" :label="2">国家旗帜</el-radio>
            <el-radio size="mini" :label="3">下拉展示</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>

    <el-dialog title="编辑语点显示文本" :visible.sync="dialogFormVisible" :width="'480px'" :close-on-click-modal="false">
      <div>
        <el-form v-loading="loadingLanguageText" @submit.native.prevent>
          <el-form-item v-for="(item, index) in languageTextList" :key="index" :label="item.name"
            :label-width="'100px'" class="requireStar">
            <el-input size="medium" v-model="item.text" autocomplete="off" maxlength="50"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submitLanguageText">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { mapState } from 'vuex'
export default {
  created () {
    this.getData()
  },
  computed: {
    ...mapState([
      'alllanguage',
      'site'
    ])
  },
  data () {
    return {
      loading: false,
      // defaultSite: 0,
      sconfig: [],
      loadingLanguageText: true,
      dialogFormVisible: false,
      languageTextList: [],
      formLabelWidth: '110px',
      form: {
        defaultSite: 0,
        languageStyle: 1
      }
    }
  },
  methods: {
    getData () {
      this.loading = true
      this.$post('/site/site-config-status-infos', null).then(response => {
        if (response && response.length > 0) {
          this.sconfig = response
          let item = this.sconfig.find(item => {
            return parseInt(item.isMain) === 1
          })
          if (item) {
            this.form.defaultSite = item.siteId
          } else {
            let iItem = this.sconfig.find(item => {
              return parseInt(item.status) === 1
            })
            if (iItem) {
              this.form.defaultSite = iItem.siteId
            }
          }
        } else {
          this.sconfig = []
        }
        this.$post('/host/get-language-style', null).then(response => {
          if (response) {
            this.form.languageStyle = response
          } else {
            this.form.languageStyle = 1
          }
          this.loading = false
        })
      })
    },
    getSiteLanguage (siteId) {
      let site = this.site.list.find(item => {
        return parseInt(item.id) === parseInt(siteId)
      })
      if (!site) {
        return '未找到站点数据！' + siteId
      }
      let language = this.alllanguage.find(item => {
        return parseInt(item.id) === parseInt(site.languageId)
      })
      if (!language) {
        return '未找到语言数据！' + site.languageId
      }
      return language.name
    },
    changeDefaultSite (value) {
      this.loading = true
      this.$post('/site/change-default-site-and-infos', { defaultSiteId: value }).then(response => {
        if (response && response.length > 0) {
          this.sconfig = response
          let item = this.sconfig.find(item => {
            return parseInt(item.isMain) === 1
          })
          if (item) {
            this.form.defaultSite = item.siteId
          } else {
            let iItem = this.sconfig.find(item => {
              return parseInt(item.status) === 1
            })
            if (iItem) {
              this.form.defaultSite = iItem.siteId
            }
          }
        } else {
          this.sconfig = []
        }
        this.loading = false
      })
    },
    checkLanguageText () {
      this.loadingLanguageText = true
      this.dialogFormVisible = true
      // dialogFormVisible: false,
      // languageTextList: []
      this.$post('/host/get-hconfig-info', null).then(response => {
        this.languageTextList = []
        if (response && response.id && parseInt(response.id) > 0) {
          let languageText = response.languageText ? JSON.parse(response.languageText) : []
          this.languageTextList = this.site.list.map(item => {
            let litem = this.alllanguage.find(lag => {
              return lag.id === item.languageId
            })
            if (!litem) {
              return null
            }
            let titem = languageText.length > 0 ? languageText.find(tlag => {
              return litem.id === tlag.id
            }) : null
            return {
              id: litem.id,
              name: litem.name,
              text: titem ? titem.text : litem.text
            }
          })
        }
        this.loadingLanguageText = false
      })
    },
    submitLanguageText () {
      for (let i in this.languageTextList) {
        if (!this.languageTextList[i].text.trim()) {
          this.$message.error('显示文本不能为空！')
          return
        }
      }
      let param = this.languageTextList.map(item => {
        return {
          id: item.id,
          text: item.text
        }
      })
      this.loadingLanguageText = true
      this.$post('/host/save-hconfig-languagetext', {
        languagetext: JSON.stringify(param)
      }).then(response => {
        if (response && response.id && parseInt(response.id) > 0) {
          this.dialogFormVisible = false
        }
        this.loadingLanguageText = false
      })
    },
    changeLanguageStyle (value) {
      this.loading = true
      this.$post('/host/update-language-style', { languageStyle: value }).then(response => {
        if (response) {
          this.form.languageStyle = response
        } else {
        }
        this.loading = false
      })
    }
  },
  components: {
  }
}
</script>
<style scoped lang="scss">
.lang-set {
  margin-left: 24px;
  .el-form-item {
    margin-bottom: 0px;
  }
}
.requireStar /deep/ .el-form-item__label:before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}
</style>
